<template>
  <!-- <h1>组件嵌套关系</h1> -->
  <!-- <Header />
  <Main />
  <Aside /> -->
  <!-- <Parent /> -->
  <!-- <ParentEvent /> -->
  <!-- <ParentEventModel /> -->
  <!-- <Attributes class="att-container" /> -->

  <!-- <SlotsBase>
    <div>
      <h3>插槽标题</h3>
      <p>插槽内容</p>
    </div>
  </SlotsBase> -->

  <!-- “v-slot:” 可以简写成“#” -->
  <!-- <SlotsTow>
    <template v-slot:header>
      <h3>{{ header }}</h3>
    </template>
<template #main>
      <p>内容</p>
    </template>
</SlotsTow> -->

  <!-- 父组件和子组件互相传值 -->
  <!-- <SlotsThree v-slot="slotProps">
    <h3>{{ soltThree }} - {{ slotProps.msg }}</h3>
  </SlotsThree>
  <SlotsThree>
    <template #header="slotProps">
      <h3>{{ slotProps.msg }}</h3>
    </template>
  </SlotsThree> -->

  <!-- <h3>组件的生命周期：{{ message }}</h3>
  <button @click="updateData">更新数据</button> -->

  <!-- <lifeDemo /> -->

  <!-- keep-alive组件保持存活：不进行销毁 -->
  <!-- <keep-alive>
    <component :is="tabComponent"></component>
  </keep-alive>
  <button @click="changeTab">切换页面</button> -->

  <h3>Root</h3>
  <Parent title="Root的数据title：由Root传到Parent再传到Child" />

</template>

<script>
//import Header from './pages/Header.vue'
// import Main from './pages/Main.vue'
// import Aside from './pages/Aside.vue'

//组件传递数据并props校验
// import Parent from './components/Parent.vue'

// export default {
//   components: {
//     //Header,
//     // Main,
//     // Aside,
//     Parent
//   }
// }

//使用this.$emit触发自定义事件
// import ParentEvent from './components/customEvent/ParentEvent.vue'
// export default{
//   components:{
//     ParentEvent
//   }
// }

//组件事件结合v-model使用
// import ParentEventModel from './components/customEventModel/ParentEventModel.vue'
// export default{
//   components:{
//     ParentEventModel
//   }
// }


//透传Attributes
// import Attributes from './components/Attributes/Attributes.vue'
// export default {
//   components: {
//     Attributes
//   }
// }

//插槽基础知识
// import SlotsBase from './components/slots/SlotsBase.vue'
// export default {
//   components: {
//     SlotsBase
//   }
// }

//插槽基础知识2
// import SlotsTow from './components/slots/SlotsTow.vue'
// export default {
//   data() {
//     return {
//       header: '标题头'
//     }
//   },
//   components: {
//     SlotsTow
//   }
// }

//插槽基础知识3
// import SlotsThree from './components/slots/SlotsThree.vue'
// export default {
//   data() {
//     return {
//       soltThree: '插槽三'
//     }
//   },
//   components: {
//     SlotsThree
//   }
// }

/**
 * 组件的生命周期函数
 * 创建期：beforeCreate、created
 * 挂载期：beforeMount、mounted
 * 更新期：beforeUpdate、updated
 * 销毁期：beforUnMount、unmounted
 */
// export default{
//   data(){
//     return {
//       message:"123"
//     }
//   },
//   methods:{
//     updateData(){
//       this.message = "456"
//     }
//   },
//   beforeCreate(){
//     console.log('组件创建之前')
//   },
//   created(){
//     console.log('组件创建之后')
//   },
//   beforeMount(){
//     console.log('组件挂载之前')
//   },
//   mounted(){
//     console.log('组件挂载之后')
//   },
//   beforeUpdate(){
//     console.log('数据更新之前')
//   },
//   updated(){
//     console.log('数据更新之后')
//   },
//   beforeUnmount(){
//     console.log('组件销毁之前')
//   },
//   unmounted(){
//     console.log('组件销毁之后')
//   }
// }

//生命周期应用
// import lifeDemo from './components/life/lifeDemo.vue'
// export default{
//   components:{
//     lifeDemo
//   }
// }

//动态组件
// import TabPageA from './components/TabPage/TabPageA.vue'
// // import TabPageB from './components/TabPage/TabPageB.vue'
// //异步加载组件
// import { defineAsyncComponent } from 'vue';
// const TabPageB = defineAsyncComponent(() => import('./components/TabPage/TabPageB.vue'))

// export default {
//   data() {
//     return {
//       tabComponent: "TabPageA"
//     }
//   },
//   components: {
//     TabPageA,
//     TabPageB,
//   },
//   methods: {
//     changeTab() {
//       this.tabComponent = this.tabComponent == "TabPageA" ? "TabPageB" : "TabPageA";
//     }
//   } 
// }

//依赖注入
import Parent from './components/dependency/Parent.vue'
export default {
  data() {
    return {
      title2: "Root的数据title2：使用provide，然后在Child中使用inject（该方法只能由上级往下级传递数据，不能反向）"
    }
  },
  // provide:{
  //   title2:"Root的数据title2：使用provide，然后在Child中使用inject"
  // },
  //函数形式：
  provide() {
    return {
      title2: this.title2
    }
  },
  components: {
    Parent
  }
}
</script>

<style></style>